<!DOCTYPE html>
<html>
<body>
<canvas id="physics_diagram" width="560" height="420"></canvas>
<script>
    const canvas = document.getElementById('physics_diagram');
    const ctx = canvas.getContext('2d');

    // --- Configuration ---
    const scale = 30;
    const offsetX = 280; // canvas.width / 2
    const offsetY = 70;  // Top padding

    // --- World Coordinates (in meters, origin at F on the ceiling) ---
    const A_w = { x: -7, y: 0 };
    const E_w = { x: 7, y: 0 };
    const F_w = { x: 0, y: 0 };
    const B_w = { x: -3, y: -3 };
    const C_w = { x: 0, y: -7 };
    const D_w = { x: 3, y: -3 };

    // --- Helper function to map world to canvas coordinates ---
    function map(p) {
        return { x: offsetX + p.x * scale, y: offsetY - p.y * scale };
    }

    // --- Map all key points to canvas coordinates ---
    const A = map(A_w);
    const B = map(B_w);
    const C = map(C_w);
    const D = map(D_w);
    const E = map(E_w);
    const F = map(F_w);

    // --- Drawing styles ---
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    const labelFont = '22px Arial';
    const captionFont = '24px "KaiTi", "SimSun", serif';

    // --- Draw Main Structure ---

    // 1. Draw Ropes and Ceiling
    // Ceiling AE
    ctx.beginPath();
    ctx.moveTo(A.x, A.y);
    ctx.lineTo(E.x, E.y);
    ctx.stroke();

    // Rope system A-B-C-D-E
    ctx.beginPath();
    ctx.moveTo(A.x, A.y);
    ctx.lineTo(B.x, B.y);
    ctx.lineTo(C.x, C.y);
    ctx.lineTo(D.x, D.y);
    ctx.lineTo(E.x, E.y);
    ctx.stroke();

    // 2. Draw Dashed Line FC
    ctx.save();
    ctx.setLineDash([6, 6]);
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    ctx.moveTo(F.x, F.y);
    ctx.lineTo(C.x, C.y);
    ctx.stroke();
    ctx.restore();

    // 3. Draw Mass m and its connecting line
    const blockHeight = 1.2 * scale;
    const blockWidth = 1.2 * scale;
    const blockTopY = C.y + 25;

    ctx.beginPath();
    ctx.moveTo(C.x, C.y);
    ctx.lineTo(C.x, blockTopY);
    ctx.stroke();

    ctx.strokeRect(C.x - blockWidth / 2, blockTopY, blockWidth, blockHeight);

    // 4. Draw Small Balls at B and D
    const ballRadius = 5;
    ctx.beginPath();
    ctx.arc(B.x, B.y, ballRadius, 0, 2 * Math.PI);
    ctx.fill();

    ctx.beginPath();
    ctx.arc(D.x, D.y, ballRadius, 0, 2 * Math.PI);
    ctx.fill();

    // --- Draw Labels ---
    ctx.font = labelFont;

    // 5. Point Labels
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('A', A.x, A.y - 5);
    ctx.fillText('E', E.x, E.y - 5);
    ctx.fillText('F', F.x, F.y - 5);

    ctx.textAlign = 'right';
    ctx.textBaseline = 'bottom';
    ctx.fillText('B', B.x - 8, B.y);

    ctx.textAlign = 'left';
    ctx.textBaseline = 'bottom';
    ctx.fillText('D', D.x + 8, D.y);

    ctx.textAlign = 'right';
    ctx.textBaseline = 'top';
    ctx.fillText('C', C.x - 8, C.y);

    // 6. Mass Labels
    ctx.textAlign = 'left';
    ctx.textBaseline = 'bottom';
    ctx.fillText('m₀', B.x + 10, B.y - 2);

    ctx.textAlign = 'right';
    ctx.textBaseline = 'bottom';
    ctx.fillText('m₀', D.x - 10, D.y - 2);

    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('m', C.x, blockTopY + blockHeight / 2);

    // 7. Length Labels
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('14 m', F.x, F.y - 15);

    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('5 m', (A.x + B.x) / 2 - 25, (A.y + B.y) / 2 + 5); // AB
    ctx.fillText('5 m', (B.x + C.x) / 2 - 25, (B.y + C.y) / 2);      // BC
    ctx.fillText('5 m', (C.x + D.x) / 2 + 25, (C.y + D.y) / 2);      // CD
    ctx.fillText('5 m', (D.x + E.x) / 2 + 25, (D.y + E.y) / 2 + 5); // DE

    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    ctx.fillText('7 m', F.x + 10, (F.y + C.y) / 2);

    // 8. Caption
    ctx.font = captionFont;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('力图 5.7.1', canvas.width / 2, canvas.height - 10);

</script>
</body>
</html>